<template>
  <div>
    <h3>姓名:{{ p.name }}</h3>
    <p>
      爱好：
      <span v-for="item in p.hobby" :key="item">{{ item }}</span>
    </p>
  </div>
</template>

<script>
export default {
name:"Item",
props:["p","count"],
mounted() {
  console.log(this,"item")
  // this.count++
  //切记!!!!!props是只读属性,不允许被修改!!!!
    // this.p = {};
    // this.count++

    //但是会有人转空子,如果一个数据是对象类型,我们不替换对象,而是修改了对象内部的属性
    //其实也算是修改了props,但是vue不会报错,因为地址没变,它没有监听到props被修改
    //我们不推荐使用这样的做法!!!!
    this.p.name += "~~~~";
}
}
</script>

<style>

</style>